
<template>
    <fragment>
        <div class="pic" v-for="(item,idx) in boxImages" :key="idx">
            <bx-image :src="item" :width="80" :height="80" :show-delete="true" :index="idx" 
                @delete-handler="deleteHandle" @load-complete="pictrueLoaded">
            </bx-image>
        </div>
        <div class="upload-box" @click="clickUploadFile()" v-show="boxImages.length<maxlength">
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <input ref="selectfile" type="file" style="display:none;" @change="selectFile($event)" />
        </div>
    </fragment>
</template>

<script>
/**
 * Bx图片上传通用组件1
 * 调用前先传 七牛token
 */
import BxImage from '../BxImage';
import guid from '@/utils/guid'
import * as fileUpload from '@/utils/fileupload'
import * as imageHelper from '@/utils/image'

export default {
  name: 'BxImageBox',
  components:{BxImage},
  props: {
    images: {
      type: Array,
      default: []
    },
    originImages: {
      type: Array,
      default: []
    },
    maxlength:{
        type:Number,
        default:1
    },
    qiniutoken:{
        type:String,
        default:''
    }
  },
  data() {
    return {
      boxImages:[],
      boxImagesOrigin:[],
      running:false,
    }
  },
  created() {
    this.boxImages=this.images;
    this.boxImagesOrigin=this.originImages;
    //console.log("图片加载完成")
  },
  beforeDestroy() {
    
  },
  methods: {
    clickUploadFile(){
        if(this.running){
            that.$message({
                message: '当前有图片正在上传中,请稍后再操作...',
                type: 'warning'
            });
            return;
        }
        this.$refs.selectfile.dispatchEvent(new MouseEvent('click'));
    },
    selectFile($event){
        var that=this;
        var token=this.qiniutoken;
        var key=guid.createGuid().replace(/-/g,'')+".jpg";

       var files=$event.target.files;
       if(files.length==0){return;}
       that.running=true;
       fileUpload.uploadQiniu({
          file:files[0],
          token:token,
          key:key,
          process:function(percert){
            console.log('正在上传...'+percert.toFixed(2)+'%');
          }
       }).then(completeres=>{
          console.log("上传成功",completeres);
          that.running=false;
          that.boxImages.push(imageHelper.GetFullUrl(completeres.key,200,200));
          that.boxImagesOrigin.push(completeres.key);
          this.$emit("data-change",{type:1,index:that.boxImages.length,name:completeres.key});
          setTimeout(function(){
              that.running=false;
            },1000)
       }).catch(err=>{
         that.running=false;
          that.$message({
            message: err,
            type: 'danger'
          });
       })
    },
    deleteHandle(idx){
        this.boxImages.splice(idx,1);
        this.boxImagesOrigin.splice(idx,1);
        //type 1新增 2删除  boxImagesOrigin是通过引用的方式，所以这里修改了，也同步修改组件外的数据
        //this.$emit("data-change",{type:2,index:idx});
    },
    pictrueLoaded(obj){
        if(obj.result){
            //console.log("加载完成")
        }
    }
  }
}
</script>